<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟简单的数据监测</title>
    <script src="../js/vue.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    // 定义一个数据对象
    let data = {
        name: '尤雨溪',
        address: '中国'
    }

    // 创建一个监视的实例对象，用于监视data中属性的变化
    const obs = new Observer(data)
    console.log(obs)

    // 模拟vm
    let vm = {}
    vm._data = data = obs

    // 方法
    function Observer(obj) {
        // 将对象中的属性汇总成一个数组
        const keys = Object.keys(data)
        // 循环遍历为每一个属性添加getter、setter
        keys.forEach(k => {
            Object.defineProperty(this, k, {
                get() {
                    return obj[k]
                },

                set(val) {
                    console.log(`${k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`)
                    obj[k] = val
                }
            })
        })
    }

    // // 添加getter、setter
    // Object.defineProperty(data, 'name', {
    //     get() {
    //         return data.name
    //     },
    //
    //     set(v) {
    //         console.log('name被修改了，新值为', v)
    //     }
    // })
</script>
</html>